*{
    margin: 0;padding: 0;
    list-style: none;
    box-sizing: border-box;
}


html,body{
    width: 100%;
    height: 100%;
}
.layout{
    width: 100%;
    height: 100%;
    min-width:320px;
    max-width:640px;
    display: flex;
    flex-direction: column;
    header{
        position: relative;
        .bg{
            width:100%;
            display: block;
        }
        .hui{
            width:1rem;
            height:1rem;
            position: absolute;
            top:0.1rem;
            left:50%;
            transform: translateX(-50%);
            border-radius:50%;
        }
        div{
            position: absolute;
            bottom:0;
            height:0.7rem;
            left:50%;
            transform: translateX(-50%);
            width:100%;
            img{
                display: block;
                position: absolute;
                left:50%;
                top:0.39rem;
            }
            .search{
                width:0.9rem;
                height: 0.31rem;
                transform: translate(-110%,-50%);
            }
            .message{
                width:0.9rem;
                height: 0.31rem;
                transform: translate(10%,-50%);
            }
        }
    }

    nav{
            ul{
                background-color: #ccc;
                overflow: hidden;
                li{
                    float: left;
                    width:50%;
                    height:0.55rem;
                    font-size:0.2rem;
                    text-align: center;
                    line-height:0.55rem;
                    &.active{
                        border-bottom:1px  solid  red;    
                    }
                }
                .left{
                   border-right:1px  solid  #fff;
                }
                .right{
                    
                }
            }
    }

    main{
        flex:1;
        overflow: auto;
        ul{
            overflow: hidden;
            padding:0.15rem;
            li{
                padding:0.05rem;
                float: left;
                width:2rem;
                border:1px  solid red;
                margin-bottom:0.1rem;
                &:nth-child(3n-1){
                    margin:0  0.05rem;
                }
                a{
                    display: block;
                    width:100%;
                    img{
                        width: 100%;
                        display: block;
                    }
                    h6{
                        font-size:0.2rem;
                        text-align: center;
                    }
                    p{
                        font-size:0.18rem;
                    }
                    div{
                        font-size:0.18rem;
                        height: 0.3rem;
                        width:70%;
                        margin:0  auto;
                        background-color: red;
                        color:#fff;
                        text-align: center;
                        line-height: 0.3rem;
                        padding:0  0.2rem;
                        border-radius:0.1rem;
                    }
                }
            }
        }
    }
    

}

